<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="zxh">
    <title>检测用户输入字数</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: lightskyblue;
            color: #333;
        }
        
        main {
            width: 800px;
            margin: 100px auto;
            background-color: #fff;
        }
        
        ul,
        li,
        h2,
        p {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #content {
            width: 700px;
            height: 200px;
            margin: 15px auto;
            padding: 20px;
            /*border: 1px solid #ccc;*/
            cursor: pointer;
            position: relative;
            /*overflow: hidden;*/
        }
        
        #content h2 {
            font-weight: 500;
            font-size: 18px;
            font-family: Tahoma;
            color: #1b7fb6;
        }
        
        #content .text {
            float: right;
            color: #333;
            position: relative;
            top: -20px;
        }
        
        #text {
            margin: 5px auto;
            /*color: red;*/
        }
        
        #content text strong {
            text-decoration: none;
            color: orange;
        }
        
        #content form textarea {
            width: 690px;
            height: 100px;
            border: 1px solid #ccc;
            box-shadow: inset 0 0 3px #ccc;
            padding: 5px;
            resize: none;
        }
        
        #content .fl li {
            float: left;
            margin-right: 25px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <main>
        <div id="content">
            <h2>有什么新鲜事想告诉大家?</h2>
            <!--<p class="text">可以发布超过<strong>140</strong>字的微博啦</p>-->
            <span id="inputTip"><font color="red">你可以输入140个字</font></span>
            <div style="clear: both"></div>
            <form action="">
                <textarea id="input" rows="5" cols="35" onKeyDown="textCounter()" onKeyUp="textCounter()"></textarea>
            </form>
            <ul class="fl">
                <li>表情</li>
                <li>图片</li>
                <li>视频</li>
                <li>话题</li>
                <li>头条文章</li>
                <li>....
                    <li>

            </ul>
            <input id="btn" type="submit" value="发布" disabled="disabled" />
        </div>
    </main>
</body>

</html>
<script src="js/jquery.js"></script>
<script>
    function textCounter() {
        var msg = $("#input").val()
        var length = 0
        if (msg == "") {
            $("#inputTip").html("*你还能输入140个字").css({ color: "red" })
            return
        }
        for (var i = 0; i < msg.length; i++) {
            //中文及中文标点算2个字符
            if (msg.charCodeAt(i) > 255) {
                length += 2
            } else {
                length++
            }
        }
        var count;
        //字数在合理范围时，提示信息为用户还能输入的字数，"发布"按钮可用
        if (length > 0 && length <= 140) {
            count = 140 - length
            $("#inputTip").html("*你还能输入" + count + "个字").css({ color: "red" })
            $("#btn").attr("disabled", false)
        }
        //超出限定字数时，"发布"按钮不可用，提示信息改变
        if (length > 140) {
            //alert("length:" + length);
            count = length - 140
            $("#inputTip").html("*超过" + count + "个字").css({ color: "red" })
            $("#btn").attr("disabled", true)
        }
    }

</script>